/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #0969DA;
  --ifm-color-primary-dark: #0860CA;
  --ifm-color-primary-darker: #0757BA;
  --ifm-color-primary-darkest: #054A94;
  --ifm-color-primary-light: #1F73EA;
  --ifm-color-primary-lighter: #2E7EFF;
  --ifm-color-primary-lightest: #58A6FF;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(9, 105, 218, 0.1);

  /* Custom tech colors for light theme */
  --tech-primary-blue: #0969DA;
  --tech-accent-blue: #58A6FF;
  --tech-accent-green: #1A7F37;
  --tech-accent-purple: #8250DF;
  --tech-light-bg: #FFFFFF;
  --tech-surface-bg: #F6F8FA;
  --tech-card-bg: #FFFFFF;
  --tech-border: #D1D9E0;
  --tech-border-accent: rgba(9, 105, 218, 0.2);
  --tech-text-primary: #1F2328;
  --tech-text-secondary: #656D76;
  --tech-shadow: 0 8px 24px rgba(9, 105, 218, 0.12);
  --tech-gradient: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%);

  /* Light theme overrides */
  --ifm-background-color: var(--tech-light-bg);
  --ifm-background-surface-color: var(--tech-surface-bg);
  --ifm-color-content: var(--tech-text-primary);
  --ifm-color-content-secondary: var(--tech-text-secondary);
  --ifm-navbar-background-color: rgba(255, 255, 255, 0.95);
  --ifm-footer-background-color: var(--tech-surface-bg);
}

/* Dark theme variables (enhanced) */
[data-theme='dark'] {
  --ifm-color-primary: #58A6FF;
  --ifm-color-primary-dark: #409CFF;
  --ifm-color-primary-darker: #2E8CFF;
  --ifm-color-primary-darkest: #1C7BFF;
  --ifm-color-primary-light: #70B1FF;
  --ifm-color-primary-lighter: #88BCFF;
  --ifm-color-primary-lightest: #A0C7FF;
  --docusaurus-highlighted-code-line-bg: rgba(88, 166, 255, 0.15);

  /* Dark theme tech colors */
  --tech-primary-blue: #58A6FF;
  --tech-accent-blue: #7BB8FF;
  --tech-accent-green: #39D353;
  --tech-accent-purple: #A855F7;
  --tech-accent-orange: #FDB516;
  --tech-light-bg: #0D1117;
  --tech-surface-bg: #161B22;
  --tech-card-bg: #21262D;
  --tech-hover-bg: #30363D;
  --tech-border: #30363D;
  --tech-border-accent: rgba(88, 166, 255, 0.3);
  --tech-text-primary: #F0F6FC;
  --tech-text-secondary: #8B949E;
  --tech-text-muted: #6E7681;
  --tech-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --tech-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6);
  --tech-gradient: linear-gradient(135deg, #0D1117 0%, #161B22 25%, #21262D 50%, #161B22 75%, #0D1117 100%);
  --tech-hero-gradient: linear-gradient(135deg, #0D1117 0%, #161B22 25%, #21262D 50%, #30363D 75%, #161B22 100%);

  /* Dark theme overrides */
  --ifm-background-color: var(--tech-light-bg);
  --ifm-background-surface-color: var(--tech-surface-bg);
  --ifm-color-content: var(--tech-text-primary);
  --ifm-color-content-secondary: var(--tech-text-secondary);
  --ifm-navbar-background-color: rgba(13, 17, 23, 0.95);
  --ifm-footer-background-color: var(--tech-surface-bg);
  --ifm-card-background-color: var(--tech-card-bg);
  
  /* Dark theme button colors */
  --ifm-button-background-color: var(--tech-card-bg);
  --ifm-button-border-color: var(--tech-border);
}

/* Global dark theme enforcement */
[data-theme='dark'] {
  background: var(--tech-light-bg) !important;
  color: var(--tech-text-primary) !important;
}

[data-theme='dark'] * {
  border-color: var(--tech-border);
}

/* Ensure all containers have dark background */
[data-theme='dark'] .container,
[data-theme='dark'] .container-fluid {
  background: transparent;
}

/* Global body styling - Light tech theme */
body {
  background: var(--tech-gradient);
  background-attachment: fixed;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  color: var(--tech-text-primary);
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

/* Dark theme body enhancements */
[data-theme='dark'] body {
  background: var(--tech-hero-gradient);
  background-attachment: fixed;
}

/* Ensure the main wrapper also gets the dark background */
[data-theme='dark'] .main-wrapper {
  background: transparent;
}

/* Dark theme root background */
[data-theme='dark'] html {
  background: var(--tech-light-bg);
}

/* Dark theme for the main container */
[data-theme='dark'] #__docusaurus {
  background: var(--tech-hero-gradient);
  min-height: 100vh;
}

/* Navbar enhancements */
.navbar {
  border-bottom: 1px solid var(--tech-border);
  box-shadow: var(--tech-shadow);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

[data-theme='dark'] .navbar {
  background: rgba(13, 17, 23, 0.98);
  border-bottom-color: var(--tech-border);
}

.navbar__title {
  font-weight: 700;
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

[data-theme='dark'] .navbar__title {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sidebar enhancements */
.theme-doc-sidebar-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--tech-border);
  transition: all 0.3s ease;
}

[data-theme='dark'] .theme-doc-sidebar-container {
  background: rgba(22, 27, 34, 0.98);
  border-right-color: var(--tech-border);
}

.menu__link {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.menu__link:hover {
  background: rgba(9, 105, 218, 0.08);
  color: var(--tech-primary-blue);
  transform: translateX(4px);
}

[data-theme='dark'] .menu__link:hover {
  background: rgba(88, 166, 255, 0.12);
  color: var(--tech-primary-blue);
}

.menu__link--active {
  background: linear-gradient(90deg, rgba(9, 105, 218, 0.12), transparent);
  border-left: 3px solid var(--tech-primary-blue);
  color: var(--tech-primary-blue);
}

[data-theme='dark'] .menu__link--active {
  background: linear-gradient(90deg, rgba(88, 166, 255, 0.15), transparent);
  border-left-color: var(--tech-primary-blue);
}

/* Content area enhancements */
.main-wrapper {
  background: transparent;
}

article {
  background: var(--tech-card-bg);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--tech-border);
  padding: 2rem;
  margin: 1rem 0;
  box-shadow: var(--tech-shadow);
  transition: all 0.3s ease;
}

[data-theme='dark'] article {
  background: var(--tech-card-bg);
  border-color: var(--tech-border);
  box-shadow: var(--tech-shadow-elevated);
}

/* Code blocks */
.prism-code {
  background: var(--tech-surface-bg) !important;
  border: 1px solid var(--tech-border);
  border-radius: 8px;
  box-shadow: var(--tech-shadow);
  transition: all 0.3s ease;
}

[data-theme='dark'] .prism-code {
  background: var(--tech-card-bg) !important;
  border-color: var(--tech-border);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--tech-text-primary);
  transition: color 0.3s ease;
}

/* Temporarily disable global h1 gradient effect to fix publications page issue */
/* h1 {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* Publications page title exception - multiple selectors ensure override */
.publications-page h1,
.publications-page .title,
.title_ruWM,
.container_hzh_ h1 {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #b8860b !important;
  background-clip: unset !important;
  color: #b8860b !important;
}

/* Temporarily disable dark theme global h1 gradient effect to fix publications page issue */
/* [data-theme='dark'] h1 {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
} */

/* Publications page dark theme title exception - multiple selectors ensure override */
[data-theme='dark'] .publications-page h1,
[data-theme='dark'] .publications-page .title,
[data-theme='dark'] .title_ruWM,
[data-theme='dark'] .container_hzh_ h1 {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffd700 !important;
  background-clip: unset !important;
  color: #ffd700 !important;
}

h2 {
  border-bottom: 2px solid var(--tech-border);
  padding-bottom: 0.5rem;
}

/* Links */
a {
  color: var(--tech-primary-blue);
  transition: all 0.3s ease;
}

a:hover {
  color: var(--tech-accent-green);
  text-decoration: none;
}

[data-theme='dark'] a {
  color: var(--tech-primary-blue);
}

[data-theme='dark'] a:hover {
  color: var(--tech-accent-orange);
}

/* Buttons */
.button {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.button--primary {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-purple));
  border: none;
  box-shadow: var(--tech-shadow);
}

[data-theme='dark'] .button--primary {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange));
}

.button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(9, 105, 218, 0.25);
}

[data-theme='dark'] .button--primary:hover {
  box-shadow: 0 12px 32px rgba(88, 166, 255, 0.3);
}

/* Cards and containers */
.card {
  background: var(--tech-card-bg);
  border: 1px solid var(--tech-border);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

[data-theme='dark'] .card {
  background: var(--tech-card-bg);
  border-color: var(--tech-border);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(9, 105, 218, 0.15);
  border-color: var(--tech-border-accent);
}

[data-theme='dark'] .card:hover {
  box-shadow: 0 16px 48px rgba(88, 166, 255, 0.2);
  border-color: var(--tech-border-accent);
}

/* Footer */
.footer {
  background: var(--tech-surface-bg);
  border-top: 1px solid var(--tech-border);
  transition: all 0.3s ease;
}

[data-theme='dark'] .footer {
  background: var(--tech-surface-bg);
  border-top-color: var(--tech-border);
}

.footer__title {
  color: var(--tech-text-primary);
  font-weight: 600;
}

.footer__item {
  color: var(--tech-text-secondary);
}

.footer__link-item {
  color: var(--tech-text-secondary);
  transition: color 0.3s ease;
}

.footer__link-item:hover {
  color: var(--tech-primary-blue);
  text-decoration: none;
}

[data-theme='dark'] .footer__link-item:hover {
  color: var(--tech-accent-orange);
}

.footer__copyright {
  color: var(--tech-text-secondary);
}

/* Animations */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(88, 166, 255, 0.3); }
  50% { box-shadow: 0 0 30px rgba(88, 166, 255, 0.6); }
}

.tech-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Tech-specific enhancements */
.hero__title {
  background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-green), var(--tech-accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3.5rem;
  font-weight: 800;
}

.hero__subtitle {
  color: var(--tech-text-secondary);
  font-size: 1.25rem;
  margin-top: 1rem;
}

/* Mermaid diagram styling */
.mermaid {
  background: var(--tech-card-bg);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--tech-border);
  box-shadow: var(--tech-shadow);
  transition: all 0.3s ease;
}

[data-theme='dark'] .mermaid {
  background: var(--tech-card-bg);
  border-color: var(--tech-border);
}

/* Mermaid light theme customization */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
  fill: var(--tech-surface-bg);
  stroke: var(--tech-primary-blue);
  stroke-width: 2px;
}

[data-theme='dark'] .mermaid .node rect,
[data-theme='dark'] .mermaid .node circle,
[data-theme='dark'] .mermaid .node ellipse,
[data-theme='dark'] .mermaid .node polygon {
  fill: var(--tech-hover-bg);
  stroke: var(--tech-primary-blue);
}

.mermaid .node .label {
  color: var(--tech-text-primary);
  font-weight: 500;
}

.mermaid .edgePath .path {
  stroke: var(--tech-primary-blue);
  stroke-width: 2px;
}

.mermaid .edgeLabel {
  background-color: var(--tech-card-bg);
  color: var(--tech-text-primary);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Table styling */
table {
  background: var(--tech-card-bg);
  border-radius: 8px;
  border: 1px solid var(--tech-border);
  transition: all 0.3s ease;
  border-collapse: collapse;
  width: 100%;
  display: table;
}

[data-theme='dark'] table {
  background: var(--tech-card-bg);
  border-color: var(--tech-border);
}

th {
  background: var(--tech-surface-bg);
  color: var(--tech-primary-blue);
  font-weight: 600;
}

[data-theme='dark'] th {
  background: var(--tech-hover-bg);
  color: var(--tech-primary-blue);
}

td, th {
  border-color: var(--tech-border);
}

/* Table wrapper for horizontal scrolling */
.markdown,
article .markdown,
[class*='blogPostContent'] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Admonition styling */
.admonition {
  background: var(--tech-card-bg);
  border-left: 4px solid var(--tech-primary-blue);
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
}

[data-theme='dark'] .admonition {
  background: var(--tech-card-bg);
  border-left-color: var(--tech-primary-blue);
}

.admonition-heading {
  background: rgba(9, 105, 218, 0.08);
  color: var(--tech-primary-blue);
}

[data-theme='dark'] .admonition-heading {
  background: rgba(88, 166, 255, 0.15);
  color: var(--tech-primary-blue);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  article {
    margin: 0.5rem;
    padding: 1rem;
  }

  .navbar__title {
    font-size: 1.2rem;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  /* Mobile navbar fixes - Higher z-index for proper layering */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
  }

  /* Dark theme mobile navbar */
  [data-theme='dark'] .navbar {
    background: rgba(13, 17, 23, 0.98);
    backdrop-filter: blur(12px);
  }

  /* Mobile menu container styling */
  .navbar-sidebar {
    background: var(--tech-light-bg) !important;
    border-right: 1px solid var(--tech-border);
    box-shadow: var(--tech-shadow);
    z-index: 1001 !important;
  }

  [data-theme='dark'] .navbar-sidebar {
    background: var(--tech-surface-bg) !important;
    border-right-color: var(--tech-border);
  }

  /* Mobile menu content */
  .navbar-sidebar__items {
    background: transparent;
  }

  /* Mobile menu backdrop */
  .navbar-sidebar__backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px);
    z-index: 1000 !important;
  }

  /* Mobile menu items */
  .navbar-sidebar .menu__link,
  .navbar-sidebar .navbar__item {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.25rem 0.5rem;
    transition: all 0.3s ease;
    color: var(--tech-text-primary) !important;
  }

  .navbar-sidebar .menu__link:hover,
  .navbar-sidebar .navbar__item:hover {
    background: rgba(9, 105, 218, 0.08) !important;
    color: var(--tech-primary-blue) !important;
    transform: translateX(4px);
  }

  [data-theme='dark'] .navbar-sidebar .menu__link:hover,
  [data-theme='dark'] .navbar-sidebar .navbar__item:hover {
    background: rgba(88, 166, 255, 0.12) !important;
    color: var(--tech-primary-blue) !important;
  }

  /* Mobile menu toggle button */
  .navbar__toggle {
    color: var(--tech-text-primary) !important;
    transition: all 0.3s ease;
    z-index: 1002;
  }

  .navbar__toggle:hover {
    color: var(--tech-primary-blue) !important;
    background: rgba(9, 105, 218, 0.08) !important;
  }

  [data-theme='dark'] .navbar__toggle:hover {
    color: var(--tech-primary-blue) !important;
    background: rgba(88, 166, 255, 0.12) !important;
  }

  /* Ensure sidebar is visible and properly layered */
  .navbar-sidebar--show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Mobile dropdown menu styling */
  .dropdown .dropdown__menu {
    background: var(--tech-card-bg) !important;
    border: 1px solid var(--tech-border);
    border-radius: 8px;
    box-shadow: var(--tech-shadow);
    z-index: 1003;
  }

  [data-theme='dark'] .dropdown .dropdown__menu {
    background: var(--tech-card-bg) !important;
    border-color: var(--tech-border);
  }

  /* Ensure hero content is not hidden behind navbar */
  .hero {
    margin-top: 0;
    padding-top: 2rem;
  }

  /* Fix for mobile navbar links */
  .navbar__link {
    color: var(--tech-text-primary) !important;
  }

  .navbar__link:hover {
    color: var(--tech-primary-blue) !important;
  }

  [data-theme='dark'] .navbar__link {
    color: var(--tech-text-primary) !important;
  }

  [data-theme='dark'] .navbar__link:hover {
    color: var(--tech-primary-blue) !important;
  }
}

/* Enhanced color mode toggle in navbar */
.navbar .colorModeToggle_DEO1 {
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.2);
}

[data-theme='dark'] .navbar .colorModeToggle_DEO1 {
  background: rgba(88, 166, 255, 0.15);
  border-color: rgba(88, 166, 255, 0.3);
}

.navbar .colorModeToggle_DEO1:hover {
  background: rgba(88, 166, 255, 0.2);
  border-color: rgba(88, 166, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2);
}

/* Enhanced toggle button styles */
.toggle_vylO {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

.toggle_vylO:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 4px 8px rgba(88, 166, 255, 0.3)) !important;
}

/* Custom scrollbar for dark theme */
[data-theme='dark']::-webkit-scrollbar {
  width: 8px;
}

[data-theme='dark']::-webkit-scrollbar-track {
  background: var(--tech-surface-bg);
}

[data-theme='dark']::-webkit-scrollbar-thumb {
  background: var(--tech-border);
  border-radius: 4px;
}

[data-theme='dark']::-webkit-scrollbar-thumb:hover {
  background: var(--tech-primary-blue);
}

/* Additional mobile fixes for navbar sidebar */
@media (max-width: 996px) {
  .navbar-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9999 !important;
  }

  .navbar-sidebar--show .navbar-sidebar {
    transform: translateX(0) !important;
  }

  .navbar-sidebar__backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
  }

  .navbar-sidebar--show .navbar-sidebar__backdrop {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force display for mobile menu */
  .navbar__toggle {
    display: flex !important;
  }

  /* Ensure mobile menu items are visible */
  .navbar-sidebar .navbar__items {
    display: flex !important;
    flex-direction: column !important;
    padding: 1rem 0 !important;
  }

  .navbar-sidebar .navbar__item {
    display: block !important;
    width: 100% !important;
  }
}

/* ============================================
   Blog Page Optimizations - Wider Content
   ============================================ */

/* Only apply blog optimizations to blog pages - use more specific selectors */

/* Hide blog sidebar (left side posts list) - only on blog pages */
[class*='blog-wrapper'] aside[class*='blogSidebar'],
[class*='blog-wrapper'] aside.col--3,
[class*='blog-wrapper'] .theme-blog-sidebar {
  display: none !important;
}

/* Hide table of contents (right side) - only on blog pages, not docs */
[class*='blog-wrapper'] .theme-doc-toc-desktop,
[class*='blog-wrapper'] .table-of-contents,
[class*='blog-wrapper'] div[class*='tableOfContents'],
[class*='blog-wrapper'] div[class*='tocCollapsible'] {
  display: none !important;
}

/* Expand blog content row to full width - only on blog pages */
[class*='blog-wrapper'] div[class*='blogContainer'] .row,
[class*='blog-wrapper'] .row {
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Expand blog content column to use full width - only on blog pages */
[class*='blog-wrapper'] .col--7,
[class*='blog-wrapper'] div[class*='blogPostContent'] {
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 auto !important;
}

/* Center blog content container - wider layout - only on blog pages */
[class*='blog-wrapper'] .container,
[class*='blog-wrapper'] div[class*='blogContainer'] {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 3rem !important;
}

/* Blog post content - centered and wide - only on blog pages */
[class*='blog-wrapper'] article,
[class*='blog-wrapper'] article[class*='blogPostItem'],
[class*='blog-wrapper'] div[class*='blogPostContent'] article {
  min-width: 60vw !important;
  max-width: 1400px !important;
  margin: 2rem auto !important;
  padding: 3rem 4rem !important;
  display: block !important;
}

/* Blog post header - only on blog pages */
[class*='blog-wrapper'] header[class*='blogPostHeader'] {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Blog list page optimization - only on blog pages */
[class*='blog-wrapper'] .margin-vert--lg,
[class*='blog-wrapper'] div[class*='blogListPage'] {
  max-width: 1400px !important;
  margin: 2rem auto !important;
  width: 100% !important;
}

/* Ensure blog post items are centered - only on blog pages */
[class*='blog-wrapper'] .blogPostItem,
[class*='blog-wrapper'] div[class*='blogPostItem'] {
  max-width: 1400px !important;
  margin: 0 auto 2rem auto !important;
}

/* Center blog post content wrapper - only on blog pages */
[class*='blog-wrapper'] div[class*='blogPostPageContent'] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Responsive adjustments for blog - only on blog pages */
@media (max-width: 996px) {
  [class*='blog-wrapper'] article,
  [class*='blog-wrapper'] article[class*='blogPostItem'] {
    min-width: auto !important;
    padding: 2rem 1.5rem !important;
  }

  [class*='blog-wrapper'] .container,
  [class*='blog-wrapper'] div[class*='blogContainer'] {
    padding: 0 1rem !important;
  }
}

@media (max-width: 768px) {
  /* Remove all padding and margins on mobile for full-width display */
  [class*='blog-wrapper'] article,
  [class*='blog-wrapper'] article[class*='blogPostItem'] {
    padding: 1rem 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
  }

  /* Remove container padding on mobile */
  [class*='blog-wrapper'] .container,
  [class*='blog-wrapper'] div[class*='blogContainer'] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Remove main wrapper padding on mobile */
  [class*='blog-wrapper'] .main-wrapper {
    padding: 0 !important;
  }

  /* Ensure content takes full width */
  [class*='blog-wrapper'] .row {
    margin: 0 !important;
  }

  /* Add comfortable padding to text content for readability */
  [class*='blog-wrapper'] article p,
  [class*='blog-wrapper'] article h1,
  [class*='blog-wrapper'] article h2,
  [class*='blog-wrapper'] article h3,
  [class*='blog-wrapper'] article h4,
  [class*='blog-wrapper'] article h5,
  [class*='blog-wrapper'] article h6,
  [class*='blog-wrapper'] article ul,
  [class*='blog-wrapper'] article ol,
  [class*='blog-wrapper'] article blockquote,
  [class*='blog-wrapper'] article div:not(.mermaid) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure list items have proper spacing */
  [class*='blog-wrapper'] article li {
    margin-left: 0 !important;
  }

  /* Create a scrollable container for tables */
  [class*='blog-wrapper'] .markdown > table,
  [class*='blog-wrapper'] article table {
    margin: 1rem 0 !important;
  }

  /* Wrap table in a div for scrolling */
  [class*='blog-wrapper'] table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
  }

  /* Table content should maintain structure */
  [class*='blog-wrapper'] table > thead,
  [class*='blog-wrapper'] table > tbody {
    display: table !important;
    width: 100% !important;
    min-width: 600px !important;
  }

  [class*='blog-wrapper'] table thead,
  [class*='blog-wrapper'] table tbody {
    display: table-row-group !important;
  }

  [class*='blog-wrapper'] table tr {
    display: table-row !important;
  }

  [class*='blog-wrapper'] table th,
  [class*='blog-wrapper'] table td {
    display: table-cell !important;
  }

  /* Remove padding from table cells on mobile for more content space */
  [class*='blog-wrapper'] table td,
  [class*='blog-wrapper'] table th {
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }

  /* Ensure images are responsive */
  [class*='blog-wrapper'] article img {
    max-width: calc(100% - 2rem) !important;
    height: auto !important;
    margin: 1rem !important;
    display: block !important;
  }

  /* Code blocks should be scrollable with padding */
  [class*='blog-wrapper'] article pre {
    margin: 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Mermaid diagrams should be scrollable with padding */
  [class*='blog-wrapper'] .mermaid {
    margin: 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure header elements have proper spacing */
  [class*='blog-wrapper'] article header {
    padding: 0 1rem !important;
  }

  /* Blog post metadata */
  [class*='blog-wrapper'] .avatar,
  [class*='blog-wrapper'] .avatar__intro,
  [class*='blog-wrapper'] [class*='blogPostData'] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ============================================
     Documentation Pages Mobile Optimization
     ============================================ */

  /* Remove padding from doc containers on mobile */
  .theme-doc-wrapper,
  [class*='docMainContainer'],
  .docMainContainer {
    padding: 0 !important;
  }

  /* Optimize doc article spacing */
  .theme-doc-wrapper article,
  [class*='docItemContainer'] article {
    padding: 1rem 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Add comfortable padding to doc text content */
  .theme-doc-wrapper article p,
  .theme-doc-wrapper article h1,
  .theme-doc-wrapper article h2,
  .theme-doc-wrapper article h3,
  .theme-doc-wrapper article h4,
  .theme-doc-wrapper article h5,
  .theme-doc-wrapper article h6,
  .theme-doc-wrapper article ul,
  .theme-doc-wrapper article ol,
  .theme-doc-wrapper article blockquote,
  .theme-doc-wrapper article div:not(.mermaid),
  [class*='docItemContainer'] article p,
  [class*='docItemContainer'] article h1,
  [class*='docItemContainer'] article h2,
  [class*='docItemContainer'] article h3,
  [class*='docItemContainer'] article h4,
  [class*='docItemContainer'] article h5,
  [class*='docItemContainer'] article h6,
  [class*='docItemContainer'] article ul,
  [class*='docItemContainer'] article ol,
  [class*='docItemContainer'] article blockquote,
  [class*='docItemContainer'] article div:not(.mermaid) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Make doc tables scrollable */
  .theme-doc-wrapper table,
  [class*='docItemContainer'] table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
    margin: 1rem 0 !important;
  }

  .theme-doc-wrapper table > thead,
  .theme-doc-wrapper table > tbody,
  [class*='docItemContainer'] table > thead,
  [class*='docItemContainer'] table > tbody {
    display: table !important;
    width: 100% !important;
    min-width: 600px !important;
  }

  .theme-doc-wrapper table thead,
  .theme-doc-wrapper table tbody,
  [class*='docItemContainer'] table thead,
  [class*='docItemContainer'] table tbody {
    display: table-row-group !important;
  }

  .theme-doc-wrapper table tr,
  [class*='docItemContainer'] table tr {
    display: table-row !important;
  }

  .theme-doc-wrapper table th,
  .theme-doc-wrapper table td,
  [class*='docItemContainer'] table th,
  [class*='docItemContainer'] table td {
    display: table-cell !important;
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }

  /* Doc images responsive */
  .theme-doc-wrapper article img,
  [class*='docItemContainer'] article img {
    max-width: calc(100% - 2rem) !important;
    height: auto !important;
    margin: 1rem !important;
    display: block !important;
  }

  /* Doc code blocks scrollable */
  .theme-doc-wrapper article pre,
  [class*='docItemContainer'] article pre {
    margin: 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Doc Mermaid diagrams scrollable */
  .theme-doc-wrapper .mermaid,
  [class*='docItemContainer'] .mermaid {
    margin: 1rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Remove doc container max-width constraints */
  .theme-doc-wrapper .container,
  [class*='docItemContainer'] .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Doc page header spacing */
  .theme-doc-wrapper header,
  [class*='docItemContainer'] header {
    padding: 0 1rem !important;
  }
}